<div cdkDrag cdkDragHandle
	 cdkDragRootElement=".cdk-overlay-pane"
	 mat-dialog-title>
	<div>
		<h3>Update data</h3>
	</div>
	<button aria-label="close dialog" mat-dialog-close mat-icon-button>
		<span class="material-symbols-outlined notranslate">close</span>
	</button>
</div>
<div mat-dialog-content>
	<div *ngIf="Object.keys(relationHelper).length > 0 || Object.keys(datesHelper).length > 0"
		 style="display: flex; justify-content: space-between; padding: 12px 12px 0px 12px; gap: 20px;">
		<div *ngFor="let column of relationHelper | keyvalue" style="flex: 1;">
			<mat-form-field appearance="fill" style="width: 100%">
				<mat-label>{{ column.key }}</mat-label>
				<input
					#filter
					[matAutocomplete]="auto"
					[value]="data[column.key]"
					matInput>
				<mat-autocomplete
					(optionSelected)="setValue(column.key, $event.option.value)"
					#auto="matAutocomplete">
					<ng-container *ngFor="let suggestion of column.value">
						<mat-option
							*ngIf="JSON.stringify(suggestion).indexOf(filter.value) >= 0"
							[value]="suggestion">
							{{ suggestion | json }}
						</mat-option>
					</ng-container>
				</mat-autocomplete>
			</mat-form-field>
		</div>
		<div *ngFor="let column of datesHelper | keyvalue" style="flex: 1;">
			<mat-form-field appearance="fill" style="width: 100%">
				<mat-label>{{ column.key }}</mat-label>
				<input
					matInput
					type="datetime-local"
					#time
					[value]="data[column.key]"
					(change)="setValue(column.key, column.value(time.value))">
			</mat-form-field>
		</div>
	</div>
	<ngx-monaco-editor
		[(ngModel)]="str"
		[options]="editorOptions"
		style="min-width: 100%;"
	></ngx-monaco-editor>
</div>
<mat-dialog-actions>

	<a *ngIf="selectedServer?.driver!.language.extendedJSONDoc"
	   [href]="selectedServer?.driver!.language.extendedJSONDoc"
	   mat-button
	   target="_blank">
		<span class="material-symbols-outlined notranslate">
			info
		</span>
		JSON Doc
	</a>

	<button
		(click)="revert()"
		[disabled]="!isTouched()"
		mat-flat-button>
		<span class="material-symbols-outlined notranslate">
			restart_alt
		</span>
		Revert
	</button>

	<mat-error
		*ngIf="strError() !== null"
		style="width: 420px">
		<div [innerHtml]="strError()"></div>
	</mat-error>
	<button
		(click)="update()"
		*ngIf="strError() === null"
		[disabled]="!isTouched()"
		color="primary"
		mat-flat-button>
		<span class="material-symbols-outlined notranslate">
			edit
		</span>
		Apply Changes
	</button>
</mat-dialog-actions>
